<template>
  <view class="Steps">
    <view class="item">
      <view class="status">
        <image v-if="status > 1" :src="StatusObj.imgs.SucesAudit" mode="scaleToFill" />
        <image v-if="status == 1" :src="StatusObj.imgs.UnderReview" mode="scaleToFill" />
        <image v-if="status < 1" :src="StatusObj.imgs.Beapproved" mode="scaleToFill" />
      </view>
      <view class="item">
        <view class="tip">{{ StatusObj.datas.SucesAuditText }}</view>
        <view>{{ StatusObj.datas.SucesAuditTime }}</view>
      </view>
    </view>
    <view class="Dividingline"></view>
    <view class="item">
      <view class="status">
        <image v-if="status > 2" :src="StatusObj.imgs.SucesAudit" mode="scaleToFill" />
        <image v-if="status == 2" :src="StatusObj.imgs.UnderReview" mode="scaleToFill" />
        <image v-if="status < 2" :src="StatusObj.imgs.Beapproved" mode="scaleToFill" />
      </view>
      <view class="item">
        <view class="tip">{{ StatusObj.datas.UnderReviewText }}</view>
        <view>{{ StatusObj.datas.UnderReviewTime }}</view>
      </view>
    </view>
    <view class="Dividingline"></view>
    <view class="item">
      <view class="status">
        <image v-if="status > 3" :src="StatusObj.imgs.SucesAudit" mode="scaleToFill" />
        <image v-if="status == 3" :src="StatusObj.imgs.UnderReview" mode="scaleToFill" />
        <image v-if="status < 3" :src="StatusObj.imgs.Beapproved" mode="scaleToFill" />
      </view>
      <view class="item">
        <view class="tip">{{ StatusObj.datas.BeapprovedText }}</view>
        <view>{{ StatusObj.datas.BeapprovedTime }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
/**
 * @status状态
 * @parms { 已审核 } SucesAudit
 * @parms { 当前审核} UnderReview
 * @parms { 未审核 } Beapproved
 */
/**
 * @StatusObj数据
 * @imgs  {  SucesAudit, UnderReview,Beapproved   } 状态图
 * @datas { SucesAuditText,SucesAuditTime,
 *          UnderReviewText,UnderReviewTime,
 *          BeapprovedText,BeapprovedTime
 *        } 状态数据
 */
const Props = defineProps(["status", "StatusObj"]);
</script>
<style lang="scss" scoped>
image {
  width: 100%;
  height: 100%;
}

.Steps {
  background: #fff;
  padding: 50rpx 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .Dividingline {
    margin-bottom: 100rpx;
    height: 7rpx;
    width: 130rpx;
    border: 10rpx;
    border-radius: 15rpx;
    background: #dad8d8;
  }

  .status {
    margin: 0 auto;
    width: 50rpx;
    height: 50rpx;
  }

  .item {
    margin-top: 10rpx;
    font-size: 16rpx;
    color: #9e9c9c;
    text-align: center;

    .tip {
      margin-bottom: 5rpx;
      font-size: 28rpx;
      color: #000;
    }
  }
}
</style>
